<template>
    <div class="tracker">
        <div class="title">
            <h1>持仓价值追踪器</h1>
        </div>
        <Header v-model:exchangeRate="exchangeRate" v-model:cash="cash" :date="date" />
        <CompanyList ref="companyListRef" :companies="companies" :handlers="handlers" />
        <ImportExport
            v-model:visible="exportDialogVisible"
            :isExport="isExport"
            :exportTracker="exportTracker"
            :importTracker="importTracker"
        />
        <el-button type="primary" @click="addCompany">新增</el-button>
        <el-button type="success" @click="showExport">导出</el-button>
        <el-button type="success" @click="showImport">导入</el-button>
    </div>
</template>

<script lang="ts">
import {
    defineComponent, onMounted, reactive, ref,
} from 'vue';
import { useTracker } from '@/components/utils/useTracker';
import { useExport } from '@/components/utils/useExport';

import Header from './Header.vue';
import CompanyList from './CompanyList.vue';
import ImportExport from './ImportExport.vue';

export default defineComponent({
    components: {
        Header,
        CompanyList,
        ImportExport,
    },
    setup() {
        const companyListRef = ref<typeof CompanyList>();
        const addCompany = () => {
            companyListRef.value!.addCompany();
        };
        const bindings = useTracker();
        const { updateCompanyValuePercentage } = bindings;
        onMounted(() => {
            updateCompanyValuePercentage();
        });

        return {
            ...bindings,
            addCompany,
            companyListRef,
            ...useExport(),
        };
    },
});
</script>

<style lang="scss" scoped>
.tracker {
    width: 100%;
    padding: 20px;
    border: solid 1px #ccc;
    border-radius: 4px;

    .title {
        text-align: center;
    }
}
</style>
